<html>
<?php
#########################程序简介##########################
# Spam Message Classifiers
# time 2017.12.16
# author: liu13
?>
<head>
    <title>草图动漫检测</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style type="text/css">
        body {background:#eee;}
        ul {padding:0; margin:0;}
        li {list-style:none;}
        #container {margin: 0 auto; width: 35%; text-align:center}
        #title {color:#146fdf;font-size:25px; text-align:center; font-family:"YouYuan"; font-weight:bold;margin-top:40px;margin-bottom: 40px;}
		#form_content{text-align:center;}
        a {color:#146fdf; text-decoration: none}
        a:hover {color: black; text-decoration: underline}
        #g_list {margin-top:60px; background:#fff;border-radius:4px;}
        #g_u,#g_p {position:relative;background:#eee;}
        #g_u {border-bottom:1px solid #eaeaea}
        .inputstyle {text-align:center;-webkit-tap-highlight-color:rgba(255,255,255,0); width:100%; height:144px;color:#000;border:0; background:0; font-size:16px;-webkit-appearance:none;line-height:normal; /* for non-ie */}
        #cjsubmit {margin-top:40px; width:100%; height:44px; color:#146fdf}
        .button {border:0px; width:100%; height:100%;color:white; background:#146fdf; border-radius:4px; font-size:16px;}
        #notice {text-align:center; margin-top:60px; color:#246183; line-height:14px; font-size:14px; padding:15px 10px}
		#result{
			float: left;
            width: 100%;
            height:250px;
            border:1px solid #eee;
			background:#FFF;
			color: #aaa;
			font-size: 40px;
			margin-bottom: 20px;
        }
		#pic{
			position: absolute;
			left: 450px;
			top: 120px;
			width: 460px;
            height: 250px;
			opacity:0.0;
		}
        #result img{
            width: 200px;
			height: 200px;
        }
		#tips{
			margin-top: 70px;
		}
		form{
			width: 100%;
			padding-top: 10px;
			padding-left: auto;
		}
        @-moz-document url-prefix() { input { width:65px; } }/*单独对火狐进行设置*/
    </style>
</head>
<body>
    <div id="container">
        <div id="title">草图动漫检测</div> 
		<form method="post" name="cf" target="_blank" enctype="multipart/form-data" action="Welcome/do_upload">
			<div id = "result">
				<div id="tips">点击上传图片</div>
			</div>
			<input id="pic" type="file" name='pic' accept = "image/*" onchange = "selectFile()"/>
			<div id="cjsubmit">
				<input type=submit value="检测" class="button">
			</div>
		</form>

    </div>
</body>
<script type="text/javascript">
	//var files = document.getElementById('pic').files;
	var form = new FormData();//通过HTML表单创建FormData对象
	function chkfs(){ 
		var frm = document.forms['cf'];
		frm.action="Welcome/do_upload";
		return true;  
	}
	function selectFile(){
		var files = document.getElementById('pic').files;
		console.log(files[0]);
		if(files.length == 0){
			return;
		}
		var file = files[0];
		//把上传的图片显示出来
		var reader = new FileReader();
		// 将文件以Data URL形式进行读入页面
		console.log(reader);
		reader.readAsBinaryString(file);
		reader.onload = function(f){
			var result = document.getElementById("result");
			var src = "data:" + file.type + ";base64," + window.btoa(this.result);
			result.innerHTML = '<img src ="'+src+'"/>';
		}
		form.append('file',file);
		console.log(form.get('file'));
	}
</script>
</html>